<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>小区管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
		<style type="text/css">
			/*
		        找到html标签、body标签，和挂载的标签
		        都给他们统一设置样式
		    */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}
		</style>
	</head>
	<body>
		<el-container id="app">
			<el-main>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
					size="mini" style="height: 35px;border: 1px solid #e8eaec;">
					<el-form-item label="小区名称">
						<el-input placeholder="请输入小区名称" v-model="queryData.areaName">
						</el-input>
					</el-form-item>
					<el-form-item label="区划编码">
						<!-- <el-input placeholder="请输入区划编码" v-model="queryData.admDvs" type="number">
						</el-input> -->
						<el-cascader v-model="queryData.admDvs" :options="areaTree" :props="{ checkStrictly: true }">
						</el-cascader>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchEvent">查询
						</el-button>
						<el-button @click="reset">重置</el-button>
					</el-form-item>
				</el-form>
				<vxe-grid border ref="xGrid" resizable show-overflow highlight-hover-row highlight-current-row
					keep-source :height="tableHeight" size="mini" :data="tableData" :toolbar="tableToolbar"
					:edit-config="{trigger:'click', mode:'row'}" :radio-config="{labelField: 'name', trigger: 'row'}"
					:header-cell-style="{'text-align':'center'}" @toolbar-button-click="toolbarButtonClickEvent">
					<vxe-table-column type="radio" width="50" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="area_name" title="小区名称" width="200" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="admdvsname" title="所属区/县" width="120" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="org_name" title="所属社区" width="400" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="wy_company_name" title="所属物业" width="400" headerAlign="center"
						align="center">
					</vxe-table-column>

					<vxe-table-column field="create_user" title="创建人" width="120" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="create_time" width="180" title="创建日期" headerAlign="center" align="center"
						:formatter="formatDate"></vxe-table-column>
					</vxe-table-column>
					<vxe-table-column field="update_user" title="修改人" width="120" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="update_time" width="180" title="修改日期" headerAlign="center" align="center"
						:formatter="formatDate"></vxe-table-column>
					</vxe-table-column>
					</vxe-table-column>
					<vxe-table-column title="操作" width="180" headerAlign="center" align="center" show-overflow
						fixed="right">
						<template v-slot="{ row }">
							<vxe-button v-if="row.orgCode!= '01'" type="text" icon="fa fa-edit vxe-primary-color"
								@click="editEvent(row)" title="编辑"></vxe-button>
							<vxe-button v-if="row.orgCode!= '01'" type="text" icon="fa fa-trash-o vxe-danger-color"
								@click="removeEvent(row)" title="删除"></vxe-button>
						</template>
					</vxe-table-column>
				</vxe-grid>

				<vxe-pager style="margin-bottom: 20px;padding-top: 10px;" background :page-size.sync="pageSizeHouse"
					:current-page.sync="currentPageHouse" :total="totalSize" @page-change="handleCurrentChange" size="mini"
					:layouts="['Sizes','PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump','FullJump', 'Total']">
				</vxe-pager>


				<vxe-modal v-model="isShowModel" :title="isAddOrUpdate ? '新增小区信息' : '编辑小区信息' " :width="modelWith"
					:height="modelHeight" @close="clseModel" show-zoom resize>
					<template #default>
						<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="100px"
							class="demo-ruleForm" style="padding: 50px;">
							<el-form-item label="物业名称" prop="ratingDescription">
								<el-autocomplete class="inline-input" :disabled="disabled"
									v-model="formData.ratingDescription" style="width: 400px;"
									:fetch-suggestions="querySearch" :placeholder="isAddOrUpdate ? '请输入物业名称' : '暂无物业名称'"
									@select="handleSelect"></el-autocomplete>
							</el-form-item>
							<el-form-item label="所属区县" prop="region">
								<el-cascader v-model="formData.region" :options="areaTree"
									:props="{ checkStrictly: true }" style="width: 400px;"></el-cascader>
							</el-form-item>
							<!-- <el-form-item v-if="isAddOrUpdate == 0" label="旧小区名称" prop="oldVillageName">
								<el-input placeholder="请输入小区名称" :disabled="disabled" v-model="formData.oldVillageName"
									style="width: 400px;">
								</el-input>
							</el-form-item> -->
							<el-form-item label="小区名称" prop="villageName">
								<el-input placeholder="请输入小区名称" v-model="formData.villageName" style="width: 400px;">
								</el-input>
							</el-form-item>
							<el-form-item style="text-align: right;">
								<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
								<el-button @click="resetForm('ruleForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</template>
				</vxe-modal>
			</el-main>
		</el-container>
	</body>

	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						tableHeight: 500,
						pageSizeHouse: 10, //每页显示的条数
						currentPageHouse: 1, //当前第几页
						totalSize: 0, //总页数
						// tablePage: {
						// 	perfect: true,
						// 	total: 0,
						// 	currentPage: 1,
						// 	pageSize: 15,
						// 	align: 'right',
						// 	pageSizes: [15, 30, 45, 60, 75, 90],
						// 	layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
						// 		'Total'
						// 	],
						// },
						tableToolbar: {
							buttons: [{
								code: 'add',
								name: '新增小区',
								status: 'perfect',
								icon: 'fa fa-plus vxe-primary-color'
							}, ],
							refresh: false,
							perfect: true,
							custom: true
						},
						// tableProxy: {
						// 	props: {
						// 		result: 'data.rows',
						// 		total: 'data.total'
						// 	},
						// 	ajax: {
						// 		// 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax） page 对象： { pageSize, currentPage }
						// 		query: ({
						// 			page,
						// 			sort,
						// 			filters
						// 		}) => {
						// 			return XEAjax.post(
						// 				`${curlFinance}/xqWy/getXqWyQuery?currentPage=${page.currentPage}&pageSize=${page.pageSize}`, {
						// 					areaName: this.queryData.areaName,
						// 					admDvs: this.queryData.admDvs,
						// 				}
						// 			);
						// 		}
						// 	}
						// },
						isShowModel: false,
						disabled: false,
						isAddOrUpdate: 1, // 1:新增   0:编辑
						formData: {
							ratingDescription: null,
							villageName: null,
							oldVillageName: null,
							id: null,
							region: []
						},
						formRules: {
							ratingDescription: [{
								required: true,
								message: '请选择物业名称',
								trigger: ['blur', 'change']
							}],
							villageName: [{
								required: true,
								message: '请输入小区名称',
								trigger: 'blur'
							}],
							oldVillageName: [{
								required: true,
								message: '请输入小区名称',
								trigger: 'blur'
							}],
							region: [{
								required: true,
								message: '请选择小区所在的位置',
								trigger: 'blur'
							}],
						},
						modelWith: '50%',
						modelHeight: '60%',
						filterName: '',
						loading: false,
						originData: [],
						tableData: [],
						restaurants: [],
						areaId: null,
						wyCompanyId: null,
						areaTree: [],
						queryData: {
							areaName: null,
							admDvs: null
						},
					}
				},
				created() {
					this.getXqWyQuery()
					this.getAreaTree()
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 75;
				},
				methods: {
					getXqWyQuery() {
						this.tableData = []
						XEAjax.post(`${curlFinance}/xqWy/getXqWyQuery?currentPage=` + this.currentPageHouse +
							'&pageSize=' + this.pageSizeHouse, {
								areaName: this.queryData.areaName,
								admDvs: this.queryData.admDvs,
							}).then(res => {
							if (res.code == 200) {
								this.tableData = res.data.rows
								this.totalSize = res.data.total
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								})
							}
						});
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'add':
								this.getBuildList()
								this.isShowModel = true
								this.isAddOrUpdate = 1
								break;
						}
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:MM:ss')
					},
					clseModel() {
						this.formData = {
							ratingDescription: null,
							villageName: null,
							region: []
						}
						this.disabled = false
					},
					querySearch(queryString, cb) {
						var restaurants = this.restaurants;
						var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
						// 调用 callback 返回建议列表的数据
						cb(results);
					},
					createFilter(queryString) {
						return (restaurant) => {
							return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
						};
					},
					handleSelect(item) {
						//console.log(item);
					},
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								if (this.formData.region.length > 2) {
									this.formData.region = this.formData.region[2]
									this.isAddOrUpdate ? this.xqWyAdd() : this.xqWyUpdate()
								} else {
									this.$XModal.message({
										message: '请具体到区/县一级',
										status: 'error'
									});
								}
							} else {
								return false;
							}
						});
					},
					resetForm(formName) {
						if (this.isAddOrUpdate) {
							this.$refs[formName].resetFields();
						} else {
							this.formData.villageName = null
							this.formData.region = []
						}
					},
					btnExpand() {
						this.$refs.xTree.setAllTreeExpansion(true)
					},
					editEvent(row) {
						this.getAreaTree()
						this.formData.id = row.id
						this.formData.ratingDescription = row.wy_company_name
						this.formData.villageName = row.area_name
						this.formData.region[0] = 421
						this.formData.region[1] = row.p_id
						this.formData.region[2] = parseInt(row.adm_dvs)
						this.areaId = row.area_id
						this.wyCompanyId = row.wy_company_id
						this.disabled = true
						this.isShowModel = true
						this.isAddOrUpdate = 0
					},
					removeEvent(row) {
						this.$XModal.confirm('确定要删除该数据？').then(type => {
							if (type == 'confirm') {
								XEAjax.post(`${curlFinance}/xqWy/xqWyDel?AreaId=` + row.area_id +
									'&WyCompanyId=' + row.wy_company_id).then(res => {
									if (res.code == 200) {
										this.$message({
											message: '删除成功',
											type: 'success'
										})
										this.getXqWyQuery()
									} else {
										this.$message({
											message: res.msg,
											type: 'error'
										})
									}
								});
							}
						})
					},
					getBuildList() {
						XEAjax.post(`${curlFinance}/xqWy/getAllWuYe?currentPage=1&pageSize=20`, {}).then(data => {
							if (data.code == 200) {
								let optionList = [];
								if (data.data[0].hasOwnProperty('children')) {
									optionList = data.data[0].children;
								} else {
									optionList = data.data
								}

								let newOptionList = []
								for (let i in optionList) {
									newOptionList.push({
										'label': optionList[i].label,
										"value": optionList[i].label,
										"id": optionList[i].value,
									})
								}
								this.restaurants = newOptionList
							} else {
								this.$XModal.message({
									message: data.msg,
									status: 'error'
								});
							}
						});
					},
					xqWyAdd() {
						let params = {
							admDvs: this.formData.region,
							areaName: this.formData.villageName,
							wyCompanyId: this.findID(this.formData.ratingDescription),
							wyCompanyName: this.formData.ratingDescription,
						}
						console.log(params)
						if (params.wyCompanyId != undefined) {
							XEAjax.post(`${curlFinance}/xqWyNew/xqWyAdd`, params).then(data => {
								if (data.code == 200) {
									this.$XModal.message({
										message: data.msg,
										status: 'success'
									});
									this.isShowModel = false
									this.disabled = false
									this.formData = {
										ratingDescription: null,
										villageName: null,
										region: []
									}
									this.getXqWyQuery()
								} else {
									this.$XModal.message({
										message: data.msg,
										status: 'error'
									});
								}
							});
						} else {
							this.$XModal.message({
								message: '请不要手动输入物业名称，请选择弹出下拉框中的物业',
								status: 'warning'
							});
						}
					},
					findID(name) {
						for (let i in this.restaurants) {
							if (name == this.restaurants[i].label) {
								return this.restaurants[i].id
							}
						}
					},
					xqWyUpdate() {
						let params = {
							admDvs: this.formData.region,
							id: this.formData.id,
							areaId: this.areaId,
							areaName: this.formData.villageName,
							wyCompanyId: this.wyCompanyId,
							wyCompanyName: this.formData.ratingDescription,
						}
						XEAjax.post(`${curlFinance}/xqWyNew/xqWyUpdate`, params).then(data => {
							if (data.code == 200) {
								this.$XModal.message({
									message: data.msg,
									status: 'success'
								});
								this.isShowModel = false
								this.getXqWyQuery()
							} else {
								this.$XModal.message({
									message: data.msg,
									status: 'error'
								});
							}
						});
					},
					getAreaTree() {
						XEAjax.post(`${tree}/wjapimsarea/getAreaTree`).then(data => {
							if (data.code == 200) {
								this.areaTree = data.data
							} else {
								this.$XModal.message({
									message: data.msg,
									status: 'error'
								});
							}
						});
					},
					handleChange(value) {
						console.log(value)
						if (value.length > 2) {
							this.formData.region = value[2]
						} else {
							this.$XModal.message({
								message: '请具体到区/县一级',
								status: 'error'
							});
						}
					},
					searchEvent() {
						if (this.queryData.admDvs) {
							this.queryData.admDvs = this.queryData.admDvs[this.queryData.admDvs.length - 1]
							this.getXqWyQuery()
						} else {
							this.getXqWyQuery()
						}
					},
					reset() {
						this.queryData = {
							areaName: null,
							admDvs: null
						}
						setTimeout(() => {
							this.getXqWyQuery()
						}, 300)
					},
					handleCurrentChange(e){
						this.currentPageHouse = e.currentPage
						this.pageSizeHouse = e.pageSize
						this.getXqWyQuery()
					}
				}
			};
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>
</html>
